<template>
  <div class="dashboard">
    <div class="dashboard-container">
      <Header />
      <div class="dashboard-container-content">
        <div class="dashboard-container-content-left">
          <ContentLeft />
        </div>
        <div class="dashboard-container-content-center">
          <ContentCenter />
        </div>
        <div class="dashboard-container-content-right">
          <ContentRight />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import Header from "./components/header.vue";
  import ContentLeft from "./components/contentLeft.vue";
  import ContentCenter from "./components/contentCenter.vue";
  import ContentRight from "./components/contentRight.vue";

  export default {
    name: 'Dashboard',
    components: {
      Header,
      ContentLeft,
      ContentCenter,
      ContentRight,
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ])
    },
    created() {
      this.initData();
    },
    mounted() {
      this.bodyScale();
      window.onresize = () => {
        return (() => {
          this.bodyScale();
        })();
      };
      if(this.sidebar.opened) {
        this.$store.dispatch('app/toggleSideBar')
      }
      // this.initData();
    },
    methods: {
      async initData() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        await this.$store.dispatch('general/getList');
        await this.$store.dispatch('importantCritical/getList');
        await this.$store.dispatch('accountPermission/getList');
        await this.$store.dispatch('logAudit/getList');
        await this.$store.dispatch('vaultApply/getList');
        loading.close();
      },
      bodyScale() {
        // 1872 设计稿的宽度 1002 设计稿的高度
        const devicewidth = document.documentElement.clientWidth; // 获取当前分辨率下的可是区域宽度
        const scale = devicewidth / 1872; // 分母——设计稿的尺寸
        const container = document.querySelector(".dashboard-container");
        if (container) {
          container.style.zoom = scale; // 放大缩小相应倍数
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
.dashboard {
  width: 100%;
  height: 100vh;
  background-color: #304156;
  position: relative;
  padding: 0 15px;

  &-container {
    &-content {
      display: flex;
      justify-content: space-between;
      height: 100%;

      &-left {
        width: 485px;
      }

      &-center {
        width: 780px;
      }

      &-right {
        width: 485px;
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
